<template>
	<view class="dramaBox" v-if="viewBox">
		<view class="isMask"></view>
		<view v-if="lockCompilations" class="dramaContent">
			<view class="topBox">
				<view class="back-top"></view>
				<view class="topLeft"><image style="width: 188rpx;height: 304rpx;border-radius: 13rpx;" :src="videoInfo.coverImgUrl"></image></view>
				<view class="topRight">
					<view style="color: rgba(255, 255, 255, 0.50);font-size: 24rpx;">10000+人购买</view>
					<view style="color: white;font-size: 34rpx;margin-bottom: 9rpx;font-weight: bold;" class="clamp">
						《{{ compInfo.title }}》{{ (lockEpisodic || lockAds) && lockCompilations ? '' : '完整版' }}
					</view>
					<view style="color: rgba(255, 255, 255, 0.6);font-size: 26rpx;">感谢您支持作者，购买后继续观看</view>
					<view style="display: flex;align-items: center;justify-content: flex-start;color: white;margin-top: 37rpx;margin-bottom: 17rpx;">
						<image style="width: 73.4rpx;height: 23rpx;" src="../../../static/icon_zhuanxiang.png"></image>
						￥
						<text style="font-size: 56rpx;font-weight: bolder;margin-top: -30rpx;margin-left: 10rpx;">
							{{ lockCompilations.fruitNum ? (lockCompilations.fruitNum / 100).toFixed(2) : 0 }}
						</text>
						<text style="text-decoration: line-through;color: rgba(255, 255, 255, 0.6);margin-left: 11rpx;font-size: 26rpx;">
							原价{{ lockCompilations.fruitNum ? ((lockCompilations.fruitNum + 200) / 100).toFixed(2) : 0 }}
						</text>
					</view>
					<view v-if="isTime && viewBox" class="countTimeDown">
						<view style="margin-right: 3rpx;">优惠倒计时</view>
						<countTime bg="#3E3E45" @timeFinish="timeFinish" :countTime="isTime"></countTime>
					</view>
				</view>
			</view>
			<view v-if="(lockEpisodic || lockAds) && lockCompilations" class="btnBox">
				<view @click="lockEpisodicClick" v-if="lockEpisodic" style="margin-right:30rpx;" class="isButton buttonLeft">
					<!-- {{ lockEpisodic.fruitNum | fruitNum10 }}{{moneyName}}解锁本集 -->
					{{ lockEpisodic.fruitNum }}{{moneyName}}解锁本集
				</view>
				<!-- <view @click="lockAdsClick(3)" v-else-if="lockAds" class="isButton buttonRight breathe">观看广告解锁</view> -->
				<view @click="lockCompilationsClick" class="isButton buttonRight breathe">解锁全集</view>
			</view>
			<view v-else class="btnBox"><view style="width:580rpx;" @click="lockCompilationsClick" class="isButton buttonRight breathe">解锁全集</view></view>
		</view>
		<view v-else-if="lockEpisodic" class="dramaContent">
			<view class="topBox">
				<view class="back-top"></view>
				<view class="topLeft"><image style="width: 188rpx;height: 304rpx;border-radius: 13rpx;" :src="videoInfo.coverImgUrl"></image></view>
				<view class="topRight">
					<view style="color: rgba(255, 255, 255, 0.50);font-size: 24rpx;">10000+人购买</view>
					<view style="color: white;font-size: 34rpx;margin-bottom: 9rpx;font-weight: bold;" class="clamp">《{{ compInfo.title }}》第{{ videoInfo.sequence + 1 }}集</view>
					<view style="color: rgba(255, 255, 255, 0.6);font-size: 26rpx;">感谢您支持作者，购买后继续观看</view>
					<view style="display: flex;align-items: center;justify-content: flex-start;color: white;margin-top: 37rpx;margin-bottom: 17rpx;">
						<image style="width: 73.4rpx;height: 23rpx;" src="../../../static/icon_zhuanxiang.png"></image>
						<!-- <text style="font-size: 56rpx;font-weight: bolder;margin-top: -30rpx;margin-left: 10rpx;">{{ (lockEpisodic.fruitNum || 0) | fruitNum10 }}{{moneyName}}</text> -->
						<text style="font-size: 42rpx;font-weight: bolder;margin-top: -30rpx;margin-left: 10rpx;">{{ (lockEpisodic.fruitNum || 0) }}{{moneyName}}</text>
						<text style="text-decoration: line-through;color: rgba(255, 255, 255, 0.6);margin-left: 11rpx;font-size: 26rpx;">
							<!-- 原价{{ (lockEpisodic.fruitNum ? lockEpisodic.fruitNum + 20 : 20) | fruitNum10 }}{{moneyName}} -->
							原价{{ (lockEpisodic.fruitNum ? lockEpisodic.fruitNum + 20 : 20) }}{{moneyName}}
						</text>
					</view>
					<view v-if="isTime && viewBox" class="countTimeDown">
						<view style="margin-right: 3rpx;">优惠倒计时</view>
						<countTime bg="#3E3E45" @timeFinish="timeFinish" :countTime="isTime"></countTime>
					</view>
				</view>
			</view>
			<view v-if="false" class="btnBox"><view style="width:580rpx;" @click="lockCompilationsClick" class="isButton buttonRight breathe">解锁全集</view></view>
			<view v-if="lockEpisodic && lockAds" class="btnBox">
				<!-- <view @click="lockAdsClick(2)" style="margin-right:30rpx;" class="isButton buttonLeft">观看广告解锁</view> -->
				<view style="width:580rpx;" @click="lockEpisodicClick" class="isButton buttonRight breathe">解锁本集</view>
			</view>
			<view v-if="lockEpisodic && !lockAds" class="btnBox">
				<!-- <view style="max-width: 172rpx;color: #FFFFFF;background: #3E3E45;margin-right: 26rpx;" @click="chooseSeq" class="isButton buttonLeft">选集</view> -->
				<view style="width:580rpx;" @click="lockEpisodicClick" class="isButton buttonRight breathe">解锁本集</view>
			</view>
		</view>
		<view v-else-if="lockAds" class="dramaContent1">
			<view class="topAdBox">
				<view class="topAdRight">
					<view class="topAd-line1"></view>
					<view class="topAd-title">解锁第{{ videoInfo.sequence + 1 }}集</view>
					<view class="topAd-line"></view>
				</view>
				<view class="bottomBox" @click="lockAdsClick(1)">
					<image style="width: 530rpx;height: 100rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/ad_lock_icon.png"></image>
					<image class="ad-free" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/ad_free_icon.png"></image>
				</view>
			</view>
			<!-- <view class="topBox">
				<view class="back-top"></view>
				<view class="topLeft"><image style="width: 188rpx;height: 304rpx;border-radius: 13rpx;" :src="videoInfo.coverImgUrl"></image></view>
				<view class="topRight">
					<view style="color: rgba(255, 255, 255, 0.50);font-size: 24rpx;">10000+人购买</view>
					<view style="color: white;font-size: 34rpx;margin-bottom: 9rpx;font-weight: bold;" class="clamp">《{{ compInfo.title }}》第{{ videoInfo.sequence + 1 }}集</view>
					<view style="color: rgba(255, 255, 255, 0.6);font-size: 26rpx;">感谢您支持作者，观看广告后继续观看111</view>
					<view v-if="isTime && viewBox" class="countTimeDown">
						<view style="margin-right: 3rpx;">优惠倒计时</view>
						<countTime bg="#3E3E45" @timeFinish="timeFinish" :countTime="isTime"></countTime>
					</view>
				</view>
			</view>
			<view v-if="false" class="btnBox"><view style="width:580rpx;" @click="lockCompilationsClick" class="isButton buttonRight breathe">解锁全集</view></view>
			<view style="width: 580rpx;" @click="lockAdsClick(1)" class="isButton buttonRight breathe">观看广告解锁</view> -->
		</view>
	</view>
</template>

<script>
import chooseBox from './chooseBox.vue';
import countTime from './countTime.vue';
export default {
	components: { chooseBox, countTime },
	name: 'dramaList',
	props: {
		balance: {
			type: Number,
			default: 0
		},
		videoInfo: {
			type: Object,
			default: {}
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		compInfo: {
			type: Object,
			default: {}
		},
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		viewBox: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			isIos:getApp().globalData.isIos,
			iosPaySwitch: false,
			moneyName:this.moneyName,
			isTime: 0,
			hideTime: false,
			chooseIndex: 0,
			lockAds: '',
			lockEpisodic: '',
			lockCompilations: ''
		};
	},
	methods: {
		chooseSeq(){
			this.$emit('chooseSeq');
		},
		lockAdsClick(type) {
			if (type == 2) {
				getApp().globalData.lockEpisodic = this.lockEpisodic;
			} else if (type == 3) {
				getApp().globalData.lockCompilations = this.lockCompilations;
			}
			getApp().globalData.btnType = type;
			console.log('lockAdsClick');
			this.$emit('lockAdsClick', this.lockAds['index']);
		},
		timeFinish() {
			uni.setStorageSync('countTime', new Date().getTime() + 86400000 + 3600000);
			this.hideTime = true;
		},
		chooseSeq() {
			this.$emit('chooseSeq');
		},
		isNext() {
			this.$emit('isNext');
		},
		isLast() {
			this.$emit('isLast');
		},
		buyClick() {
			this.$emit('buyClick', this.chooseIndex);
		},
		isClose() {
			this.$emit('isClose');
		},
		lockCompilationsClick() {
			if(this.isIos && !this.iosPaySwitch){
				uni.showModal({
					title:'提示',
					content:'亲，iOS暂时不支持虚拟支付，抱歉哦~',
					showCancel:false
				})
				return;
			}
			this.$emit('buyClick', this.lockCompilations['index']);
		},
		lockEpisodicClick() {
			if(this.isIos && !this.iosPaySwitch){
				uni.showModal({
					title:'提示',
					showCancel:false,
					content:'亲，iOS暂时不支持虚拟支付，抱歉哦~',
				})
				return;
			}
			this.$emit('buyClick', this.lockEpisodic['index']);
		},
		dramaClick(index) {
			if (this.currentIndex != index) {
				this.$emit('changeTab', index); //设置swiper的第几页
			}
		}
	},
	onLoad() {},
	async onReady() {
		console.log('触发展示锁-----------')
		// 获取IOS支付开关
		let resConfig = await this.getConfigDouyin();
		if(resConfig) {
			this.iosPaySwitch = resConfig.isIOSPayTt
		}
		let tempTime = uni.getStorageSync('countTime');
		if (!tempTime) {
			uni.setStorageSync('countTime', new Date().getTime() + 86400000);
			tempTime = uni.getStorageSync('countTime');
		}
		this.isTime = tempTime;
		console.log('onReady', this.videoInfo);
		let goodsLocks = this.videoInfo.goodsLocks.map((item, index) => {
			item['index'] = index;
			return item;
		});
		console.log('goodsLocks', goodsLocks);
		if (goodsLocks && goodsLocks.length > 0) {
			for (let i = 0; i < goodsLocks.length; i++) {
				if (goodsLocks[i]['goodsType'] == 'EPISODIC_DRAMA' && goodsLocks[i]['releaseWay'] == 'FRUIT_PAY') this.lockEpisodic = goodsLocks[i];
				else if (goodsLocks[i]['goodsType'] == 'COMPILATIONS' && goodsLocks[i]['releaseWay'] == 'FRUIT_PAY') this.lockCompilations = goodsLocks[i];
				else if (goodsLocks[i]['goodsType'] == 'EPISODIC_DRAMA' && goodsLocks[i]['releaseWay'] == 'WATCH_THE_ADS') this.lockAds = goodsLocks[i];
			}
		}
		if (!this.lockEpisodic && !this.lockCompilations && this.lockAds) {
			this.$emit('onlyLockAd', true);
		}
		if (this.lockAds) {
			this.$uma && this.$uma.trackEvent('Ume_advertisement', {
				Ume_adv_button_ex: '广告解锁按钮展示'
			});
		}

		// 自动触发锁点击
		// this.$emit('viewBox', true)
		if(!this.isIos || this.iosPaySwitch) {
			console.log('this.lockEpisodic', this.lockEpisodic)
			console.log('this.lockEpisodic', this.lockAds)
			console.log('this.lockEpisodic', this.lockCompilations)
			if(this.lockEpisodic && !this.lockCompilations) {
				this.$emit('viewBox', false)
				this.buyClick()	
			} else {
				this.$emit('viewBox', true)
			}
		} else {
			this.$emit('viewBox', true)
		}
		
	}
};
</script>

<style lang="scss">
.countTimeDown {
	display: flex;
	// align-items: center;
	// justify-content: center;
	font-size: 24rpx;
	margin-top: 26rpx;
	font-weight: 400;
	color: #ffffff80;
}
.topAdBox{
// 	width: 750rpx;
// height: 400rpx;
// background: linear-gradient(0deg, #FFF2DF, rgba(255,255,255,0));
// border-radius: 40rpx 40rpx 0px 0px;
}
.topAdRight{
	display: flex;
	justify-content: center;
	align-items: center;
}
.topAd-line{
	width: 115rpx;
height: 5rpx;
background: linear-gradient(90deg, #FD8C62, rgba(234,47,33,0));
}
.topAd-line1{
	width: 115rpx;
height: 5rpx;
background: linear-gradient(90deg, rgba(234,47,33,0),#FD8C62);
}
.topAd-title{
	font-size: 42rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #442E2C;
margin: 0 46rpx 0 46rpx;
}
.bottomBox{
	width: 530rpx;
	height: 100rpx;
	margin: 0 auto;
	margin-top: 106rpx;
	position: relative;
}
.ad-free{
	width: 224rpx;
	height: 64rpx;
	position: absolute;
	right: -46rpx;
	top: -45rpx;
}
.topBox {
	.topLeft {
		margin-right: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	margin-bottom: 29rpx;
	width: 83vw;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	.back-top {
		position: absolute;
		left: -58rpx;
		top: -40rpx;
		background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/popup_top_bg.png') no-repeat center center;
		background-size: 100% 100%;
		height: 194rpx;
		width: 100vw;
		z-index: -1;
	}
}
.timeBox {
	background: #00000012;
	border-radius: 5rpx;
	color: white;
	font-size: 30rpx;
	padding: 4rpx;
	margin-right: 4rpx;
}
.isChooseBox {
	position: relative;
	bottom: 0;
	width: 100vw;
	padding-bottom: calc(env(safe-area-inset-bottom));
	left: 0;
}
.btnBox {
	.buttonRight {
		width: 300rpx;
		height: 88rpx;
		background: linear-gradient(to right, rgba(243, 213, 159, 1), rgba(238, 207, 150, 1)) !important;
		// background: #e7e7e7 !important;
		color: #4d3507 !important;
		border-radius: 45rpx;
		color: white;
	}
	.buttonLeft {
		width: 300rpx !important;
		height: 88rpx !important;
		background: #3e3e45 !important;
		color: #ffffff !important;
		border-radius: 45rpx;
		font-size: 32rpx;
	}
	.isButton {
		color: #000000;
		line-height: 88rpx;
		font-size: 32rpx;
		text-align: center;
	}
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dramaMid {
	.midMoney::before {
		position: absolute;
		content: '';
		bottom: -10rpx;
		width: 59vw;
		height: 1px;
		left: 28%;
		background-color: #ededed;
	}
	.midMoney {
		.discountBoxRed {
			background-image: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_buy.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center center;
			color: #774700;
			font-size: 26rpx;
			padding: 0 33rpx;
		}
		.discountBox {
			background-image: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_before.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center center;
			color: #774700;
			font-size: 26rpx;
			padding: 0 33rpx;
		}
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
		margin-bottom: 55rpx;
	}
	.midTitle {
		text-align: center;
		color: #181818;
		font-size: 40rpx;
		margin-top: 20rpx;
	}
	.midDes {
		text-align: center;
		color: #666666;
		font-size: 28rpx;
	}
}
.dramaTop {
	.topRight {
		.timeNum {
			margin-top: 10rpx;
			font-size: 30rpx;
		}
		.timeDes {
			font-size: 24rpx;
		}
		position: absolute;
		right: 37rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.fansNum {
		position: absolute;
		left: 54rpx;
		font-size: 24rpx;
		top: 69rpx;
	}
	color: white;
	position: relative;
	height: 117rpx;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-image: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_fans.png');
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
}
.isClick {
	box-shadow: 0 0 5px 0 rgba(216, 0, 0, 0.3);
	border: 1px solid #ff3752 !important;
}
.buttonBox {
	display: flex;
	align-items: center;
	margin-top: 40rpx;
	justify-content: center;
	color: #000000;
	font-size: 32rpx;
	.isButton {
		width: 630rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background: #e7e7e7;
		border-radius: 40rpx;
	}
}
.midItem {
	.itemNum {
		color: #ff7200;
		font-size: 28rpx;
	}
	.itemDes {
		color: #000000;
		font-size: 34rpx;
		font-weight: bold;
	}
	flex-direction: column;
	border: 1px solid #bebebe;
	width: 300rpx;
	height: 174rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.midItem100 {
	width: 630rpx !important;
}
.midBox {
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.balanceBox {
	.balanceRight {
		font-size: 24rpx;
	}
	.balanceLeft {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	padding: 0 32rpx;
	margin-top: 20rpx;
	color: #5d5d5d;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.isLock {
	position: absolute;
	right: 0;
	top: 0;
	width: 40rpx;
	height: 29rpx;
}
.isChoose {
	height: 32rpx;
	width: 26rpx;
}
.isMask {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 101;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .5);
}
.isMargin {
	margin-left: 33rpx;
}
.dramaItem {
	position: relative;
	margin-right: 14rpx;
	margin-bottom: 14rpx;
	color: #ffffff;
	font-size: 24rpx;
	width: 86rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86rpx;
	background: #2a2a2a;
	border-radius: 8rpx;
}
.dramaContent {
	.dramaTitle {
		height: 90rpx;
		display: flex;
		font-size: 32rpx;
		align-items: center;
		padding-left: 32rpx;
		padding-right: 32rpx;
		justify-content: space-between;
	}
	color: #000000;
	position: fixed;
	flex-wrap: wrap;
	padding-left: 32rpx;
	z-index: 102;
	bottom: 0;
	width: 100vw;
	left: 0;
	box-sizing: border-box;
	padding: 36rpx 40rpx 25rpx 38rpx;
	right: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	background: #242331;
	border-radius: 39rpx 39rpx 0 0;
	padding-bottom: calc(env(safe-area-inset-bottom) + 25rpx);
}
.dramaContent1 {
	color: #000000;
	position: fixed;
	flex-wrap: wrap;
	padding-left: 32rpx;
	z-index: 102;
	bottom: 0;
	width: 100vw;
	height: 400rpx;
	left: 0;
	box-sizing: border-box;
	padding: 36rpx 40rpx 25rpx 38rpx;
	right: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	border-radius: 40rpx 40rpx 0px 0px;
	background: linear-gradient(0deg, #FFFFFF,#FFF2DF);
	padding-bottom: calc(env(safe-area-inset-bottom) + 25rpx);
}
</style>
